<template>
  <div>
    <div class="set">
      <template>
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="首页配置">
            <div class="form">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="300px" class="demo-ruleForm">
                <!-- 修改 prop 属性为 litemall_wx_index_new -->
                <el-form-item label="新品首发栏目商品显示数量" prop="litemall_wx_index_new">
                  <el-input v-model="ruleForm.litemall_wx_index_new" size="mini"></el-input>
                </el-form-item>
                <!-- 修改 prop 属性为 litemall_wx_index_hot -->
                <el-form-item label="人气推荐栏目商品显示数量" prop="litemall_wx_index_hot">
                  <el-input v-model="ruleForm.litemall_wx_index_hot" size="mini"></el-input>
                </el-form-item>
                <!-- 修改 prop 属性为 litemall_wx_index_brand -->
                <el-form-item label="品牌制造商直供栏目品牌商显示数量" prop="litemall_wx_index_brand">
                  <el-input v-model="ruleForm.litemall_wx_index_brand" size="mini"></el-input>
                </el-form-item>
                <!-- 修改 prop 属性为 litemall_wx_index_topic -->
                <el-form-item label="专题精选栏目显示数量" prop="litemall_wx_index_topic">
                  <el-input v-model="ruleForm.litemall_wx_index_topic" size="mini"></el-input>
                </el-form-item>
                <!-- 修改 prop 属性为 litemall_wx_catlog_list -->
                <el-form-item label="分类栏目显示数量" prop="litemall_wx_catlog_list">
                  <el-input v-model="ruleForm.litemall_wx_catlog_list" size="mini"></el-input>
                </el-form-item>
                <!-- 修改 prop 属性为 litemall_wx_catlog_goods -->
                <el-form-item label="分类栏目商品显示数量" prop="litemall_wx_catlog_goods">
                  <el-input v-model="ruleForm.litemall_wx_catlog_goods" size="mini"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其他配置" style="padding-left: 195px;">
            <span>商品分享功能</span><br>
            <el-switch
              style="display: block"
              v-model="ruleForm.litemall_wx_share"
            >
            </el-switch>
          </el-tab-pane>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="190px" class="demo-ruleForm">
            <el-form-item label="">
              <el-row>
                <el-button size="mini" @click="show">取消</el-button>
                <el-button type="primary" size="mini" @click="change">确定</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import { yonghu, yonghu2 } from '@/api/pzgl/xcxpz.js';
export default {
  name: 'DocumentsWx',

  data() {
    return {
      tabPosition: 'left',
      ruleForm: {
        litemall_wx_index_new: '',
        litemall_wx_index_hot: "",
        litemall_wx_index_brand: "",
        litemall_wx_index_topic: '',
        litemall_wx_catlog_list: "",
        litemall_wx_catlog_goods: '',
        litemall_wx_share: false,
      },
      rules: {
        // 为 litemall_wx_index_new 添加验证规则
        litemall_wx_index_new: [
          { required: true, message: '请输入新品首发栏目商品显示数量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_wx_index_hot 添加验证规则
        litemall_wx_index_hot: [
          { required: true, message: '请输入人气推荐栏目商品显示数量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_wx_index_brand 添加验证规则
        litemall_wx_index_brand: [
          { required: true, message: '请输入品牌制造商直供栏目品牌商显示数量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_wx_index_topic 添加验证规则
        litemall_wx_index_topic: [
          { required: true, message: '请输入专题精选栏目显示数量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_wx_catlog_list 添加验证规则
        litemall_wx_catlog_list: [
          { required: true, message: '请输入分类栏目显示数量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        // 为 litemall_wx_catlog_goods 添加验证规则
        litemall_wx_catlog_goods: [
          { required: true, message: '请输入分类栏目商品显示数量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ]
      }
    };
  },

  mounted() {
    this.show()
  },

  methods: {
    change() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          yonghu2({ ...this.ruleForm }).then((res) => {
            console.log(res);
          });
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    show() {
      yonghu().then((res) => {
        console.log(res);
        const data = res.data;
        data.litemall_wx_share = data.litemall_wx_share === 'true';
        this.ruleForm = data;
      });
    },
    // 自定义验证函数，验证输入是否为正整数
    validateNumber(rule, value, callback) {
      if (/^\d+$/.test(value) && parseInt(value) > 0) {
        callback();
      } else {
        callback(new Error('请输入正整数'));
      }
    }
  },
};
</script>
<style scoped></style>